<template>
  <div
    ref="main"
    :style="mStyle"
    class="main"
    :class="type !== 'list' ? 'scrollbars' : ''"
  >
    <slot v-if="type === 'form'"></slot>
    <slot v-else-if="type === 'ordinary'"></slot>
    <el-table
      v-else
      ref="table"
      :data="data"
      tooltip-effect="dark"
      :stripe="true"
      header-cell-class-name="table-header-cell"
      row-class-name="table-row-one"
      :row-key="getRowKeys"
      :span-method="spanMethod"
      :max-height="mHeight"
      @selection-change="handleSelectionChange"
    >
      <slot></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    footerLock: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: "list"
    },
    getRowKeys: {
      type: Function,
      default: () => {}
    },
    spanMethod: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      Height: 0,
      softNum: false
    };
  },
  computed: {
    mStyle() {
      let paddingTop = "";
      let paddingRight = "";
      let paddingBottom = "";
      let paddingLeft = "";
      let height = "";
      if (this.type === "form") {
        paddingTop = "padding-top: 10px;";
        paddingRight = "padding-right: 10px;";
        paddingLeft = "padding-left: 10px;";
        height = `height: calc(100vh -  ${this.Height}px );`;
      } else {
        height = `max-height: calc(100vh -  ${this.Height}px );`;
      }
      if (this.footerLock) paddingBottom = "padding-bottom: 80px;";

      return `${height}${paddingTop}${paddingRight}${paddingBottom}${paddingLeft}`;
    },
    mHeight() {
      let h;
      if (this.footerLock) {
        h = document.body.clientHeight - 60 - this.Height;
      } else {
        h = document.body.clientHeight - this.Height;
      }
      return h;
    }
  },
  mounted() {
    this.Height = this.$refs.main.offsetTop + 16;
  },
  methods: {
    handleSelectionChange(e) {
      this.$emit("selection-change", e);
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
}
</style>
